<script setup lang='ts'>
import Navbar from '@/layout/navbar.vue';
import img1 from '@/assets/64d57bcedde4a0cd2e6b99ab986812614e9a01991d5877806d58912b2706232200webp.webp'
import { onMounted, ref } from 'vue';

const loadingRef = ref(true)
const imgRef = ref<HTMLElement | null>(null)

onMounted(() => {
  const image = new Image()
  image.src = img1
  image.onload = () => {
    loadingRef.value = false
  }
})


</script>

<template>
  <div class='vt-home__container'>
    <Navbar />

    <vt-skeleton style="display: flex;justify-content: center;" :loading="loadingRef">
      <template #template>
        <vt-skeleton-item class="vt-skeleton__paragraph" variant="h3" style="width: 100px;"></vt-skeleton-item>
        <vt-skeleton-item class="vt-skeleton__paragraph" variant="p" style="width: 100px;"></vt-skeleton-item>
      </template>

      <template #default>
        <div class="primary-text">
          <h1>VTUI</h1>
          <p>基于 Vue3，面向设计师和开发者的组件库</p>
        </div>
      </template>
    </vt-skeleton>

    <vt-skeleton style="display: flex;justify-content: center;" :loading="loadingRef">

      <template #template>
        <vt-skeleton-item class="vt-skeleton__paragraph" variant="image"
          style="width: 240px; height: 240px"></vt-skeleton-item>
      </template>

      <template #default>
        <div class=" vt-select__one w">
          <img ref="imgRef" :src="img1">
        </div>
      </template>
    </vt-skeleton>





  </div>
</template>

<style scoped lang='scss'>
@import "@/styles/mixin/index.scss";

.vt-select__one {
  display: flex;
  justify-content: center;

  img {
    width: 60%;
  }
}

.primary-text {
  h1 {
    font-size: 40px;
    font-weight: 500;
  }

  text-align: center;
  margin: 20px 0;
}
</style>